<template>
    <div>
        <div class="block">
            <span class="demonstration">日期：</span>
            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                style="width: 180px;margin-right: 10px;">
            </el-date-picker>
            源单编号：
            <el-input style="width: 100px; margin-left: 10px; margin-right: 20px" placeholder="源单编号："
                v-model="documentNum" clearable>
            </el-input>
            <el-button type="primary" style="margin-left: 20px">查询</el-button>
        </div>

        <div style="margin-top: 10px;">

        </div>
        <el-table :data="list" @selection-change="handleSelection">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column fixed prop="documentNum" label="订单编号" width="120">
            </el-table-column>
            <el-table-column prop="saleType" label="业务类别" width="120">
            </el-table-column>
            <el-table-column prop="documentDate" label="订单日期" width="150">
            </el-table-column>
            <el-table-column prop="clientName" label="客户" width="120">
            </el-table-column>
            <el-table-column prop="totalMoney" label="订单金额" width="120">
            </el-table-column>
            <el-table-column prop="writtenOffMoney" label="已核销金额" width="120">
            </el-table-column>
            <el-table-column prop="noMoney" label="未核销金额" width="120">
                <template slot-scope="scope">
                    {{ scope.row.totalMoney - scope.row.writtenOffMoney }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="120">
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
export default {
    props: ['customerNum', 'choose'],

    data() {
        return {
            list: "",
            selectionList: []
        }
    },
    watch: {
        choose(oldValue, newValue) {
            if (oldValue == true) {
                this.getShouldForm()
            }
        },
    },
    methods: {
        handleSelection(val) {
            this.selectionList = val.map(row => {
                // 返回你需要的属性
                return {
                    // imagename: row.imagename,
                    documentNum: row.documentNum,
                    documentDate: row.documentDate,
                    received: parseFloat(row.totalMoney).toFixed(2),
                    writtenOffMoney: parseFloat(row.writtenOffMoney).toFixed(2),
                    remark: row.remark,
                    noMoney: (parseFloat(row.totalMoney) - parseFloat(row.writtenOffMoney)).toFixed(2),
                    nowMoney: (parseFloat(row.totalMoney) - parseFloat(row.writtenOffMoney)).toFixed(2),
                    saleType: row.saleType
                };
            });
            console.log(this.selectionList)

        },
        getShouldForm: function (customer) {
            console.log(this.customerNum)
            this.axios({
                url: "/cash/should/getShouldForm",
                params: {
                    // documentNum: this.documentNum,
                    customerNum: this.customerNum
                }
            }).then(rs => {
                console.log(rs)
                this.list = rs.data.list
            })
        }
    },
    created: function () {
        console.log(this.customerNum)
        this.getShouldForm()

    }
}
</script>

<style>
/* #sc {
    overflow: scroll
} */
</style>